<template>
    <div class="rankingList">
        <div class="cloud-rankingList w">
            <div class="box-title">
                <h2>云音乐排行榜</h2>
            </div>
            <div class="rankingList-box">
                <div
                    class="rankingList-item"
                    v-for="item in cloudRankingList"
                    :key="item.id"
                    :data-id="item.id"
                    @click="playListJumpDetails(item.id)"
                >
                    <div class="img-box">
                        <img :src="item.coverImgUrl" alt="" />
                    </div>
                    <div class="content-box">
                        <p>{{ item.name }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="world-rankingList w">
            <div class="box-title">
                <h2>全球排行榜</h2>
            </div>
            <div class="rankingList-box">
                <div
                    class="rankingList-item"
                    v-for="item in worldRankingList"
                    :key="item.id"
                    :data-id="item.id"
                    @click="playListJumpDetails(item.id)"
                >
                    <div class="img-box">
                        <img :src="item.coverImgUrl" alt="" />
                    </div>
                    <div class="content-box">
                        <p>{{ item.name }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "rankinglist"
);
export default {
    computed: {
        ...mapState(["cloudRankingList", "worldRankingList"]),
    },
    created() {
        this.getToplist();
        //用于记录用户的滚动方向，用户一滚动，就把滚动后得到的值赋给这个值
        //等于是一个单向锁，防止用户向上滚动的时候也会触发事件
        this.prevY = 0;
    },
    methods: {
        ...mapActions(["getToplist"]),
        playListJumpDetails(val) {
            this.$router.push("/home/playlist-details/" + val);
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/rankingList.scss";
</style>